<template>
  <view class="header">
    <view class="hometext">首页</view>
    <!-- <view  class="xttext">上海市石煤油气储存企业智能化管控平台</view> -->
    <view class="xttext">石洞口煤气制气安全管理信息化平台</view>

    <view class="citext">综合·集约·精简</view>
  </view>
  <scroll-view class="workbench" scroll-y>
    <view
      v-for="(item, index) of list"
      :key="index"
      class="workbench-card"
      v-hasPermi="item.per"
    >
      <view class="workbench-card__header">{{ item.title }}</view>
      <view class="workbench-card__body">
        <view
          v-for="(cItem, cIndex) of item.children"
          :key="cIndex"
          class="workbench-item"
          v-hasPermi="cItem.per"
        >
          <view class="workbench-item__inner" @click="handRouter(cItem)">
            <view class="workbench-item__icon">
              <image
                class="workbench-item__icon_uni"
                :src="`../../static/${cItem.icon}.svg`"
                mode=""
              ></image>
            </view>
            <view class="workbench-item__title">{{ cItem.title }}</view>
          </view>
        </view>
      </view>
    </view>
    <UniFoot type="userhome"></UniFoot>
  </scroll-view>
</template>

<script setup>
import { ref, nextTick, onMounted } from "vue";
import { router } from "@/router/index.js";
import UniFoot from "@/components/uni-foot.vue";
import { useAuthStore } from "@/store/modules/auth.js";
const authStore = useAuthStore();
const list = ref([
  {
    title: "隐患排查治理",
    per: ["app-yhdj", "app-yhzg", "app-yhzl", "app-pcrw"],
    children: [
      {
        icon: "yhdj",
        per: ["app-yhdj"],
        title: "隐患登记",
        path: "/pages/yhpc/yhdj/index",
      },
      {
        icon: "wtzg",
        title: "隐患整改",
        per: ["app-yhzg"],

        path: "/pages/yhpc/yhzg/index",
      },
      {
        icon: "yhrw",
        title: "排查治理",
        per: ["app-yhzl"],
        path: "/pages/yhpc/pcjh/pcrw",
      },
      {
        icon: "yhzl",
        title: "排查任务",
        per: ["app-pcrw"],
        path: "/pages/yhpc/pcjhrw/index",
      },
    ],
  },
  {
    title: "智能巡检",
    per: ["app-xjrw"],
    children: [
      {
        icon: "znxj",
        path: "/pages/znxj/xjrw/index",
        title: "巡检任务",
        per: ["app-xjrw"],
      },
    ],
  },
  {
    title: "作业管理",
    per: ["app-zysb", "app-zyxk"],

    children: [
      {
        icon: "zysb",
        path: "/pages/zygl/zysb/index",
        title: "作业申报",
        per: ["app-zysb"],
      },
      {
        icon: "code",
        per: ["app-zyxk"],
        path: "/pages/zygl/zyxkbl/index",
        title: "作业许可",
      },
    ],
  },
]);

const handRouter = (item) => {
  router.toPage({
    path: item.path,
  });
};
const hasPermi = (per) => {
  return permissions.includes(per);
};

onMounted(() => {
  list.value = [];
  nextTick().then(() => {
    authStore.getInfo().then(() => {
      list.value = [
        {
          title: "隐患排查治理",
          per: ["app-yhdj", "app-yhzg", "app-yhzl", "app-pcrw"],
          children: [
            {
              icon: "yhdj",
              per: ["app-yhdj"],
              title: "隐患登记",
              path: "/pages/yhpc/yhdj/index",
            },
            {
              icon: "wtzg",
              title: "隐患整改",
              per: ["app-yhzg"],

              path: "/pages/yhpc/yhzg/index",
            },
            {
              icon: "yhrw",
              title: "排查治理",
              per: ["app-yhzl"],
              path: "/pages/yhpc/pcjh/pcrw",
            },
            {
              icon: "yhzl",
              title: "排查任务",
              per: ["app-pcrw"],
              path: "/pages/yhpc/pcjhrw/index",
            },
          ],
        },
        {
          title: "智能巡检",
          per: ["app-xjrw"],
          children: [
            {
              icon: "znxj",
              path: "/pages/znxj/xjrw/index",
              title: "巡检任务",
              per: ["app-xjrw"],
            },
          ],
        },
        {
          title: "作业管理",
          per: ["app-zysb", "app-zyxk"],
          children: [
            {
              icon: "zysb",
              path: "/pages/zygl/zysb/index",
              title: "作业申报",
              per: ["app-zysb"],
            },
            {
              icon: "code",
              per: ["app-zyxk"],
              path: "/pages/zygl/zyxkbl/index",
              title: "作业许可",
            },
          ],
        },
      ];
    });
  });
});
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 250px;
  background-color: red;
  background-image: url("@/static/indexbg.jpg");
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  .citext {
    height: 180rpx;
    line-height: 180rpx;
    font-weight: 700;
    font-size: 20px;
  }
  .hometext {
    margin-bottom: 20px;
    font-weight: 550;
  }
}
.workbench {
  height: calc(100vh - 320upx);
  // height: 100vh;
  // background: #ffffff;
  background-color: $uni-bg-color;
  // padding: 20upx;
  padding-bottom: 20upx;
  box-sizing: border-box;
  &-card {
    border: #ffffff 1px solid;
    box-sizing: border-box;
    margin: 26upx;
    // background-color: $uni-bg-color;
    box-shadow: 0px 0px 20upx 0px rgba(0, 0, 0, 0.2);

    &__header {
      font-size: 30upx;
      font-weight: bold;
      padding: $uni-spacing-col-base $uni-spacing-row-base;
    }

    &__body {
      display: flex;
      flex-wrap: wrap;
      border-top: 2px solid #ddd;
    }
  }

  &-item {
    width: 25%;
    &__inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: $uni-spacing-col-base $uni-spacing-row-base;
    }

    &__icon {
      width: $uni-img-size-lg;
      height: $uni-img-size-lg;
      // background-color: #eee;
      text-align: center;
      border-radius: 50%;
      &_uni {
        width: $uni-img-size-lg;
        height: $uni-img-size-lg;
        font-size: $uni-img-size-lg !important;
        color: skyblue;
      }
    }

    &__title {
      // margin-top: $uni-spacing-col-sm;
      font-size: $uni-font-size-sm;
      padding-top: 10upx;
    }
  }
}
</style>
